<template>
  <div class="main">
    <div
      id="province"
      style="width: 100%; height: 80%; padding-top: 50px"
    ></div>
    <div class="header">
      <div class="title">今日监测方案数据</div>

      <div class="number">
        {{ count.toLocaleString() }}
        <span>次</span>
      </div>
    </div>

    <div class="bar">
      <div class="item" v-for="item in barList" :key="item.id">
        <div class="name">
          {{ item.name }}
        </div>

        <div class="barMain" :style="{ width: item.value / 10 + 'px' }"></div>
        <div class="value">{{ item.value }}条</div>
      </div>
    </div>
  </div>
</template>

<script>
import neiMengGu from "/public/js/neiMengGu.json"; // 引入地图json数据
import qingHai from "/public/js/qingHai.json"; // 引入地图json数据
import shanXi from "/public/js/shanXi.json"; // 引入地图json数据
import xinJiang from "/public/js/xinJiang.json"; // 引入地图json数据
import yunNan from "/public/js/yunNan.json"; // 引入地图json数据
import * as echarts from "echarts";
export default {
  name: "app",
  data() {
    return {
      option: {
        geo: [
          {
            map: "JS",
            zlevel: 5,
            label: {
              show: false,
              color: "#eee",
            },
            itemStyle: {
              // color: "pink", // 背景
              color: "#2075B8", // 背景
              borderWidth: "1", // 边框宽度
              borderColor: "#fff", // 边框颜色
            },
          },
          {
            map: "JS",
            top: "11%",
            zlevel: 4,
            itemStyle: {
              color: "#3C5FA1", // 背景
              borderWidth: "1", // 边框宽度
              borderColor: "#3C5FA1", // 边框颜色
            },
          },
          {
            map: "JS",
            top: "12%",
            zlevel: 3,
            itemStyle: {
              color: "#163F6C", // 背景
              borderWidth: "1", // 边框宽度
              borderColor: "#163F6C", // 边框颜色
            },
          },
          {
            map: "JS",
            top: "13%",
            zlevel: 2,
            itemStyle: {
              color: "#31A0E6", // 背景
              borderWidth: "1", // 边框宽度
              borderColor: "#31A0E6", // 边框颜色
              shadowColor: "#fff", // 外部阴影
              shadowBlur: "10",
            },
          },
        ],
      },
      provinceArr: [neiMengGu, qingHai, shanXi, xinJiang, yunNan],
      ind: 0,
      barList: [
        {
          name: "监测结果数量",
          value: 1250,
        },
        {
          name: "有害信息数量",
          value: 1360,
        },
        {
          name: "正面宣传数量",
          value: 660,
        },
      ],
      count: 5645789,
    };
  },
  methods: {
    changeView(chart) {
      this.ind++;
      if (this.ind + 1 > this.provinceArr.length) {
        this.ind = 0;
      }
      echarts.registerMap("JS", this.provinceArr[this.ind]);
      chart.setOption(this.option);

      this.changeBarNumber();
      this.changeCount();
    },
    changeBarNumber() {
      this.barList.forEach((item) => {
        item.value = Math.floor(Math.random() * 1000 + 1000);
      });
    },
    changeCount() {
      const timeer = setInterval(() => {
        this.count = Math.floor(Math.random() * 1000000 + 1000000);
      }, 70);
      setTimeout(() => {
        clearInterval(timeer);
      }, 700);
    },
  },
  mounted() {
    let chart = echarts.init(document.getElementById("province"));
    echarts.registerMap("JS", neiMengGu);
    chart.setOption(this.option);

    setInterval(() => {
      this.changeView(chart);
    }, 5000);

    window.onresize = () => {
      chart.resize();
    };
  },
};
</script>

<style lang="scss" scoped>
.main {
  position: relative;
  background-color: rgb(51, 51, 85);
}
.header {
  width: 100%;
  height: 70px;
  position: absolute;
  top: 20px;

  .title {
    width: 100%;
    height: 30%;
    text-align: center;
    font-size: 16px;
    color: rgb(158, 190, 239);
  }
  .number {
    width: 100%;
    height: 60%;
    margin-top: 6px;
    text-align: center;
    font-size: 40px;
    font-family: yahei;
    font-weight: 500;
    color: rgb(114, 146, 233);

    span {
      font-size: 14px;
    }
  }
}

.bar {
  position: absolute;
  bottom: 15px;
  left: 15px;

  .item {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    color: white;

    .name {
      margin-right: 7px;
      color: aquamarine;
    }

    .barMain {
      height: 15px;
      border-radius: 8px;
      margin-right: 7px;
      transition: width 1.5s ease;
    }

    &:nth-child(1) .barMain {
      background: -webkit-linear-gradient(left, rgb(1, 78, 1), rgb(4, 184, 4));
    }

    &:nth-child(2) .barMain {
      background: -webkit-linear-gradient(left, rgb(102, 4, 4), rgb(209, 3, 3));
    }

    &:nth-child(3) .barMain {
      background: -webkit-linear-gradient(
        left,
        rgb(141, 141, 4),
        rgb(199, 199, 5)
      );
    }
  }
}
</style>
